<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view/>
    </transition>
    <div id="childs"></div>
  </div>
</template>
<script>
import Vue  from 'vue'

import '@/assets/font/img/iconfont.js'; // 这行代码
import '@/assets/font/img/iconfont.css'; // 这行代码
import '@/assets/font/img2/iconfont.js'; // 这行代码
import '@/assets/font/img2/iconfont.css'; // 这行代码
import '@/assets/font/img3/iconfont.css'; // 这行代码
import tsmp3 from '@/assets/mp3/ts.mp3'
import xiaoxi2 from '@/assets/mp3/xiaoxi2.mp3'
import yj from '@/assets/mp3/yj.mp3'
export default {
  name: 'App', 
  components: {
   
  },
  data(){
      return {
          transitionName:"",
          
          audio:"",
          audioList:[],
          audioObj:null,
          audioEnd:true,
          playNum:0
      }
  },
  
  created(){
    let that=this;
   
      setInterval(function(){
        that.getNotice();
      },10000)
      /*setInterval(function(){
        that.playAudio();
      },13000)*/
     
    
  },  
  methods:{
    getNotice(){
     
      if(sessionStorage.getItem("token")){
          this.$post("business","/notify/getNotify").then(data=>{
            if(data){
              let _this=this;
              let cn_ex13=data.cn_ex13;
              this.$notify.info({
                title: data.cn_ex1,
                message: data.cn_ex2,
               // duration:0,
                onClick(){
                  _this.showMessage(data)
                }
              });
              
              let that=this;
              if(cn_ex13=="2"){
                  that.playAudio(xiaoxi2);
                //this.audioList.push(xiaoxi2)
              }else if(cn_ex13=="3"){
                  that.playAudio(yj);
                  //this.audioList.push(xiaoxi2)
              }else{
                  if(cn_ex13.indexOf("0")!=-1){
                    cn_ex13=Number(cn_ex13.replace("0",""));
                    this.playNum=cn_ex13
                    that.playAudio(tsmp3);
                  }else
                    that.playAudio(tsmp3);
                 // this.audioList.push(tsmp3)
              }
               
     
              
              let url=data.cn_ex11;
             /* Notification.requestPermission(status=>{
                  if(status === 'granted'){
                    let notify = new Notification(data.cn_ex1,{
                      icon:'/assets/logo.png',
                      body: data.cn_ex2
                    })

                    // 桌面消息显示时
                    notify.onshow = ()=>{
                     try{
                      let audio = new Audio(tsmp3);
                      audio.play();
                     } catch(e){}
                    }

                    // 点击时桌面消息时触发
                    notify.onclick = ()=>{
                     // that.$router.push({path:url})
                      window.focus();
                      // 跳转到当前通知的tab,如果浏览器最小化，会将浏览器显示出来
                    //  window.focus()
                    }
                  }
                })*/


            }
            let that=this;
           /* Notification.requestPermission(status=>{
                  if(status === 'granted'){
                    let notify = new Notification(data.cn_ex1,{
                      icon:'/assets/logo.png',
                      body: data.cn_ex2
                    })

                    // 桌面消息显示时
                    notify.onshow = ()=>{
                      let audio = new Audio('/assest/mp3/ts.mp3');
                      audio.play();
                    }

                    // 点击时桌面消息时触发
                    notify.onclick = ()=>{
                      //that.$router.push({path:'/byg/tabMain/desktopList?title=殡葬服务管理平台&filename=殡葬服务管理平台&isDesktop=Y&isMain=Y&toKey=殡葬服务管理平台%2F逝者简讯列表&toModel=业务管理%2F逝者简讯'})
                      window.focus();
                      // 跳转到当前通知的tab,如果浏览器最小化，会将浏览器显示出来
                    //  window.focus()
                    }
                  }
                })*/

            
            
          })
      }
      
    },
    playAudio(audio){
        console.log("this.audioEnd========="+this.audioEnd)
        if(this.audioEnd){
            if(!this.audioObj){
                this.audioObj=new Audio();
            }
            let sef=this;
            this.audioEnd=false;
            this.audioObj.src=audio;
           // this.audioList.splice(0,1);
            this.$nextTick(() => {
                console.log("play===")
                sef.audioObj.play();
            })
            
            this.audioObj.onended=()=>{
                console.log("audioObj==================")
                window.setTimeout(function(){
                      sef.audioEnd=true;
                      if(sef.playNum){
                        sef.playAudio(audio)
                        sef.playAudio=sef.playAudio-1;
                      }
                },1000)
                
            }
        }
    },
    showMessage(data){

    }
  },
  watch:{
    $route(to, from) {
       //将不想有过渡动画效果的部分路由写进判断条件中
      if(to.path.indexOf("/main")!=-1||to.path.indexOf("/login")!=-1){
        
      //  document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  
      }else{
        document.documentElement.style.fontSize = '14px';  
      }
      if(to.path !=='/' && to.path !=='/' && to.path !=='/' || from.path !=='/' && from.path !=='/' && from.path !=='/'){
        //如果to索引大于from索引,判断为前进状态,反之则为后退状态
        if(to.meta.index < from.meta.index){
        //设置动画名称
          this.transitionName = 'slide-left';
        }else if(to.meta.index > from.meta.index){
          this.transitionName = 'slide-right';
        }else if(to.meta.index == 99){
          this.transitionName =""
        }
      }else{
        this.transitionName =""
      }
    }
  }
}
</script> 
<style >
  .Router{
    position: relative;
  }
  .Router>*{
    position: absolute;
    width: 100%;
    text-align: center;
  }
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
  }

  .slide-right-enter {
    opacity: 0;
    transform: translateX(-100%);
  }

  .slide-right-leave-active {
    opacity: 0;
    transform: translateX(100%);
  }

  .slide-left-enter {
    opacity: 0;
    transform: translateX(100%);
  }

  .slide-left-leave-active {
    opacity: 0;
    transform: translateX(-100%);
  }
</style>